import React, { lazy, Suspense } from 'react';
import CityNav from './components/CityNav';
import { Switch, Route, Redirect } from "react-router-dom";
import Logo from '../components/Logo';
import NarBar from '../components/NarBar';
const Hot = lazy(() => import('./hot/Index'));
const Cinema = lazy(() => import('./cinema/Index'));
const Classic = lazy(() => import('./classic/Index'));
const Wait = lazy(() => import('./wait/Index'));

const Index = () => {
  return (
    <>
      <div>
        <div style={{ position: "fixed", top: 0, width: "100%", zIndex: 999 }}>
          <NarBar />
          <Logo />
          <CityNav />
        </div>
        <div style={{ marginTop: '150px' }}>
          <Switch>
            <Suspense fallback={<div>loading...</div>}>
              <Redirect from="/home/movies" to="/home/movies/hot" exact></Redirect>
              <Route path="/home/movies/hot">
                <Hot />
              </Route>
              <Route path="/home/movies/cinema">
                <Cinema />
              </Route>
              <Route path="/home/movies/classic">
                <Classic />
              </Route>
              <Route path="/home/movies/wait">
                <Wait />
              </Route>
            </Suspense>
          </Switch>
        </div>
      </div>
    </>
  );
}

export default Index;